<!doctype html>
<html>

<head>
	<meta charset="utf-8">

	<title>js事件委托</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#ul1 {
			width: 500px;
			height: 500px;
			background: green;
		}

		#ul1 li {
			width: 100px;
			height: 100px;
			background: #CCC;
			float: left;
			margin: 10px;
		}
	</style>

</head>

<body>
	<ul id="ul1">
		<p>点击我</p>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
<script>

	// 事件委托:利用冒泡的特点，把子级事件加到父级上，由父级统一执行效果
	var oUl = document.getElementById('ul1');
	var oP = oUl.querySelector('p');


	//1.事件冒泡演示
	// oUl.onclick = function (e) {
	// 	alert('ul');
	// 	// e.cancelBubble=true; //阻止冒泡
	// }
	// oP.onclick = function (e) {
	// 	alert('p');
	// 	// e.cancelBubble = true; //阻止冒泡
	// 	//  e.stopPropagation();   
	// }

	//2.事件捕获演示：点击p,执行的是先弹出ul,在弹出p 。把事件对象的第三个参数为true，表示捕获  ，false为冒泡
	oUl.addEventListener('click', function () {
		alert('ul');
	}, true);

	oP.addEventListener('click', function () {
		alert('p');
	}, true);

	//3.默认事件演示
	// oUl.addEventListener('contextmenu', function (e) {
	// 	alert('ul');
	// 	e.preventDefault(); //阻止默认事件   阻止右键菜单
	//   return false

	// }, false);



</script>

</html>